<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 800px;
            height: 300px;
            background-color: sandybrown;
            color: #fff;
            margin-left: 100px;
            margin-top: 100px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>

    </div>
    <!-- 
        clientX clientY 是以浏览器为准  //获取盒子在文档中的坐标
        screenX screenY 是以整个屏幕为准   
        offsetX offsetY 是以自身盒子为准   //获取盒子内的坐标

        offsetWidth 元素实际的占用宽度(包括width+padding+border)
        offsetHeight 元素实际的占用高度(包括width+padding+border)
        offsetLeft   元素距离浏览器左边距离
        offsetTop    元素距离浏览器上边的距离

        浏览器的高宽：
            document.docmentElement.clienWidth
            document.docmentElement.clienHeight
        window对象事件：
            resize   改变浏览器窗口大小的时候触发的事件

     -->

    <script>
        var div=document.querySelector("div")
        div.onmousemove=function(e)
        {
            var e=e||window.event
            div.innerHTML='offsetX:'+e.offsetX+'offsetY'+e.offsetY+'clientX:'+e.clientX+'clientY:'+e.clientY+'screenX:'+e.screenX+'screenY:'+e.screenY
        }
    </script>

</body>
</html>